<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>在线支付</title>
<link th:href="@{/css/pay.css}" rel="stylesheet" media="screen">
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
</head>
<body>
<div class="body">
    <h1 class="mod-title">
       <span class="ico_log ico-1" th:if="${pay_type eq 'alipayScan'}"></span>
       <span class="ico_log ico-3" th:if="${pay_type eq 'wechatScan'}"></span>
    </h1>
    <div class="mod-ct">
        <p style="text-align: center;padding-top: 10px;"><span class="amount" id="money" th:text="${'￥'+amount}"></span></p>
        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
            <div data-role="qrPayImg" class="qrcode-img-area">
                <div style="position: relative;display: inline-block;">
                    <img id="show_qrcode" th:src="@{/images/loading.gif}" width="250" height="230" style="display: block;">
                </div>
            </div>
        </div>
        <div class="paybtn" id="btnalipay" style="display: none;">
			 <a href="" id="alipaybtn" class="btn btn-primary">启动支付宝App支付</a>
      	</div>
        <div class="time-item">
			<div class="time-item" id="waitMsg"><h1 id="waitTip">匹配中，请耐心等待  <span id="wait_time">30</span> 秒</h1> </div>
			<div class="time-item" id="msg" style="display: none;"><h1>付款1-3分钟到账，未到账可联系客服</h1> </div>
            <strong id="minute_show"><s></s></strong>
            <strong id="second_show"><s></s></strong>
        </div>
        <div class="tip">
            <div class="ico-scan"></div>
            <div class="tip-text">
                <p id="showtext" th:if="${pay_type eq 'alipayScan'}">打开支付宝 [扫一扫]</p>
                <p id="showtext" th:if="${pay_type eq 'wechatScan'}">打开微信 [扫一扫]</p>
            </div>
        </div>
        <div class="tip-text">
        </div>
    </div>
<script type="text/javascript">
 var order_id='[[${order_id}]]'; 
 var left_time=0;
 var isReady = false;
    waitTime = window.setInterval(function(){
        wait_time();
    }, 1000);
    
    queryTime = window.setInterval(function(){
    	query_order();
    }, 2000);

    //查询订单
    function query_order(){
        $.ajax({
            type:'post',
            url:'[[@{/api/orderInfo.html?id=}]]'+order_id,
            dataType:'json',
            data:{},
            timeout : 5000,
            success:function (result) {
                try {
                    if (result.data.status == "0"){
                    	if(!isReady)
                        {
	                        if(typeof(waitTime)!="undefined"){
	                            clearInterval(waitTime);
	                        }
	                        $("#waitMsg").hide();
	                        $("#msg").show();
	                        if(result.data.pay_type=='alipay'&&isMobile()==1)
	                        {
	                        	$('#alipaybtn').attr('href',result.data.pay_url);
	                        	//$('#alipaybtn').attr('href','alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode='+result.data.pay_url);
	                        	//$('#alipaybtn').attr('href','https://ds.alipay.com/?from=mobilecodec&scheme=a%6Ci%70ays%3A%2F%2F%70%6Ca%74f%6Frma%70i%2Fs%74ar%74a%70%70%3FsaId%3D10000007%26%71rc%6Fde%3D'+encodeURIComponent(result.data.pay_url));
	                        	$('#btnalipay').show();
	                        }
	                    	$('#show_qrcode').attr("src","[[@{/api/qrImage.jpg?qr=}]]"+result.data.pay_url);
	                    	left_time=Number(result.data.expire_time);
	                        expire_query();
	                        getTime = window.setInterval(function(){
	                            expire_query();
	                        }, 1000);
                        }
                    }else if (result.data.status == "4") {
                        rematch();
                    }else if (result.data.status == "-1") {
                        
                    }else if (result.data.status == "1") {
                    	location.reload();
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            error: function(e) {
                try {
                    console.log(e);
                } catch (e) {
                    console.log(e);
                }
            }
        });
    }

    //重新匹配
    function rematch() {
        if(typeof(waitTime)!="undefined"){
            clearInterval(waitTime);
        }
        if(typeof(queryTime)!="undefined"){
        	clearInterval(queryTime);
        }
        $("#waitMsg").hide();
		$('#show_qrcode').attr("src","/images/qr_time_out.png");
		$('#msg').html("<h1 style='color:red;'>请返回重新下单</h1>");
    }
    
    
    function wait_time(type=1) {
        var time = $('#wait_time').html();
        if (time <= 1){
            if (type==1){
                if(typeof(waitTime)!="undefined"){
                    clearInterval(waitTime);
                }
                rematch();
            }
        }else{
        	$('#wait_time').html(time-1);
        }

    }
    
    function expire_query(etime){
        //var stime =Date.parse(new Date());
        //let atime = Number(etime) - Number(stime/1000);
        let atime =left_time;
        let m = 0;
        let s = 0;
        if (atime <= 0) {
        	$('#btnalipay').hide();
            $('#show_qrcode').attr("src","/images/qrcode_timeout.png");
            clearInterval(getTime);
            clearInterval(queryTime);
        } else {
            m = Math.floor((atime) / 60);
            s = Math.floor((atime) % 60);
        }
        $('#minute_show').html('<s></s>' + m + '分');
        $('#second_show').html('<s></s>' + s + '秒');
        left_time--;
    }
    
    function isMobile() {
        var ua = navigator.userAgent.toLowerCase();
        _long_matches = 'googlebot-mobile|android|avantgo|blackberry|blazer|elaine|hiptop|ip(hone|od)|kindle|midp|mmp|mobile|o2|opera mini|palm( os)?|pda|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino|maemo|fennec';
        _long_matches = new RegExp(_long_matches);
        _short_matches = '1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-';
        _short_matches = new RegExp(_short_matches);
        if (_long_matches.test(ua)) {
            return 1;
        }
        user_agent = ua.substring(0, 4);
        if (_short_matches.test(user_agent)) {
            return 1;
        }
        return 0;
    }
</script>
</body>
</html>